<template>
	<div class="app-container">
		<div style="display: flex; justify-content: flex-end;">
			<el-button @click.stop="back()" class="bac6b7" type="primary"><i class="el-icon-back" />返回列表</el-button>
		</div>
		<div style="width: 840px; margin: 0 auto;">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
				<div class="wid100" style="background: #f2f2f2;min-height: 42px;line-height: 32px;">
					<div class="dis disJuB" style="padding: 5px 15px;">
						<label class="fl label" style="font-size: 14px;"><span style="color: red;">*</span> 公告名称</label>
						<el-form-item class="mp0" prop="name">
							<el-input v-model="ruleForm.name"maxlength="30" type="text" style="width: 687px; height: 16px;"
								placeholder="30字以内，中/英/数字/字符均可" />
						</el-form-item>
					</div>
				</div>
				<div class="wid100" style="background: #f2f2f2; margin-top: 10px;">
					<div class="dis disJuB" style="padding: 5px 15px;">
						<label class="fl label" style="font-size: 14px;"><span style="color: red;">*</span> 公告详情</label>
						<el-form-item class="mp0" prop="notes">
							<el-input v-model="ruleForm.notes"maxlength="2000" type="textarea" style="width: 687px;"show-word-limit placeholder="" />
						</el-form-item>
					</div>
				</div>
			</el-form>
		</div>
		<div class="footer-btn-group dis disJuB">
			<el-button type="primary" @click.stop="submitForm('ruleForm')" class="space-mr20 btn-auto-34 btn-save bac6b7">保存</el-button>
			<el-button type="info" @click.stop="back()" class="space-mr20 btn-auto-34 btn-save">取消</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		noticeDetails,
		noticeAddEdit
	} from '@/api/staff'; // Secondary package based on el-pagination
	export default {
		name: 'noticeEdit',
		components: {},
		data() {
			return {
				id: '',
				ruleForm: {
					name: '',
					notes: ''
				},
				rules: {
					name: [{
						required: true,
						message: '30字以内，中/英/数字/字符均可',
						trigger: 'blur'
					}],
					notes: [{
						required: true,
						message: '请填写2000字符之内',
						trigger: 'blur'
					}],
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			var xuanList = [{
				name: '编辑公告',
				url: '/venue/noticeEdit?id='+this.id,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						noticeAddEdit({
							'title': this.ruleForm.name,
							'content': this.ruleForm.notes,
							'state': this.ruleForm.state,
							'id': this.id
						}).then(response => {
							this.back()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			back() {
				this.$router.go(-1)
			},
			getList() {
				noticeDetails({
					'id': this.id
				}).then(response => {
					const {
						data
					} = response
					this.ruleForm = {
						name: data.title,
						notes: data.content,
						state: data.state
					}
				}).catch(error => {
					console.log(error)
				})
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.footer-btn-group {
		padding: 40px 0;
		text-align: center;
		margin: 0 auto;
		width: 200px;
	}

	/deep/ .el-input__inner {
		//width: 190px;
		height: 32px;
	}

	/deep/ .el-textarea__inner {
		//width: 190px;
		height: 168px;
	}
</style>